﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="/favicon.ico" >
	<link rel="Shortcut Icon" href="/favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="/lib/html5shiv.js"></script>
	<script type="text/javascript" src="/lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="/h-ui.admin/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<script type="text/javascript" src="/js/vue/vue.min.js"></script>
	<link rel="stylesheet" href="/js/laypage/skin/laypage.css">
	<script type="text/javascript" src="/js/laypage/laypage.js"></script>
	<title>客户应收欠款</title>
	<style>
		.money{
			font-size: 16px;
		}
	</style>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> <a href="/billManagement/fund-client-debt/toFcd">客户应收欠款</a> <span class="c-gray en">&gt;</span> 客户应收欠款列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="text-c">
		<input type="text" class="input-text" style="width:400px" placeholder="输入客户编号、客户名称、联系人、联系电话" id="fcdNumList" name="fcdNumList">
		<button type="submit" class="btn btn-success" id="findFcd" name=""><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20" data-validator-option="{theme:'simple_right'}">
		<span class="l"><a href="javascript:;" id="daoFcd" class="btn btn-success radius"><i class="Hui-iconfont">&#xe644;</i> Excel导出</a></span>
		&nbsp;&nbsp;<a href="/billManagement/fund-client-debt/toAdd" id="addFcdBtn" class="btn btn-primary radius" data-title="日常收支"><i class="Hui-iconfont">&#xe600;</i> 新增欠款</a>
		<span class="r">共有数据：<strong id="strong"></strong> 条</span>
	</div>

	<div class="whiteBox" style="overflow: hidden;height: 50px">
		<div style="height: 30px"></div>
		<span class="font999">全部</span>
	</div>
	<div class="fl wf100" style="border-top: 3px solid #b2b2b2;font-size: 16px;height: 100px;margin-top: 15px;padding-top: 15px">
		<table id="totalDataTable" class="expertSearch " border="0" cellpadding="5" cellspacing="0" width="100%">
			<tbody><tr>
				<td align="center" valign="middle">应收欠款</td>
				<td class="font18" align="center" valign="middle"><h4>=</h4></td>
				<td id="initReceAmtTd" align="center" valign="middle">期初欠款</td>
				<td class="font18" align="center" valign="middle"><h4>-</h4></td>
				<td align="center" valign="middle">收回欠款</td>
				<td class="font18" align="center" valign="middle"><h4>-</h4></td>
				<td align="center" valign="middle">优惠</td>
				<td class="font18 free" align="center" valign="middle"><h4>-</h4></td>
				<td class="free" align="center" valign="middle">抵消欠款</td>
			</tr>
			<tr th:height="20px"></tr>
			<tr>
				<td class="font18 fontRed" align="center" valign="middle">
					<span id="receivables" class="money" th:text="${session.countList.fcdReceive}"></span>
				</td>
				<td align="center" valign="middle">&nbsp;</td>
				<td class="font18" align="center" valign="middle">
					<span id="initamt" class="money" th:text="${session.countList.fcdBegin}"></span>
				</td>
				<td align="center" valign="middle">&nbsp;</td>
				<td class="font18" align="center" valign="middle">
					<span id="totalreceiveamted" class="money" th:text="${session.countList.fcdBack}"></span>
				</td>
				<td align="center" valign="middle">&nbsp;</td>
				<td class="font18" align="center" valign="middle">
					<span id="totalfavamt" class="money" th:text="${session.countList.fcdDiscount}"></span>
				</td>
				<td class="free" align="center" valign="middle">&nbsp;</td>
				<td class="font18 free" align="center" valign="middle">
					<span id="offsetarrears" class="money" th:text="${session.countList.fcdOffset}"></span>
				</td>
			</tr>
			</tbody></table>
	</div>
	<table class="table table-border table-bordered table-bg" id="app" style="margin-top: 15px">
		<thead>
		<tr class="text-c">
			<th width="40">ID</th>
			<th width="100">操作</th>
			<th width="150">客户编号</th>
			<th width="150">客户名称</th>
			<th width="150">联系人</th>
			<th width="150">联系电话</th>
			<th width="150">期初欠款(元)</th>
			<th width="150">收回欠款(元)</th>
			<th width="150">优惠(元)</th>
			<th width="150">抵消欠款(元)</th>
			<th width="150">应收欠款(元)</th>
		</tr>
		</thead>
		<tbody>
		<tr class="text-c" v-for="(item,index) in result">
			<td>{{index+1}}</td>
			<td class="td-manage">
				<a title="详情" href="javascript:;" @click="editEvent(item.fcdName)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe623;</i></a>
			</td>
			<td>{{item.fcdNumList}}</td>
			<td>{{item.fcdName}}</td>
			<td>{{item.fcdLinkman}}</td>
			<td>{{item.fcdTelephone}}</td>
			<td>{{item.fcdBeginDebt}}</td>
			<td>{{item.fcdBackDebt}}</td>
			<td>{{item.fcdDiscount}}</td>
			<td>{{item.fcdOffsetDeb}}</td>
			<td>{{item.fcdReceivable}}</td>
		</tr>
		</tbody>
	</table>
	<div id="pagenav" style="text-align: center;position:fixed;margin-top:150px;left:0;right:0"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            result:[]
        }
    });
    var getFcdPageList = function(curr) {
        $.ajax({
            type:'get',
            dataType:'json',
            url:'/billManagement/fund-client-debt/selectFcdPage',
            data:{
                current: curr || 1,
                size:5,
                fcdNumList:$("#fcdNumList").val()
            },
            success:function(msg){
                $("#strong").html(msg.total);
                app.result = msg.list;
                laypage({
                    cont:'pagenav',
                    pages:msg.pages,
                    first:'首页',
                    last:'尾页',
                    skin: '#00A0E9',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getFcdPageList(obj.curr);
                        }
                    }
                });
            }
        });
    };
    getFcdPageList();
    /*搜索*/
    $("#findFcd").click(function () {
        getFcdPageList();
    });

    var editEvent = function(fcdName){
        window.location.href="/billManagement/fund-client-debt/fcdDetail?fcddFcdName="+fcdName;
	};
    /*Excel导出*/
    $("#daoFcd").click(function () {
        window.location.href="/billManagement/fund-client-debt/export";
    })
</script>
</body>
</html>